<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Class 与 Style 绑定</title>
    <style type="text/css" media="screen">
    .static {
        min-height: 100px;
        min-width: 100px;
        background-color: #000;
        float: left;
        margin: 5px;
    }
    
    .red {
        background-color: red;
    }
    
    .blue {
        background-color: blue;
    }
    </style>
</head>

<body>
    <div id="app">
        <h1>1.对象语法</h1>
        <div class="static" :class="{red:red,blue:blue}"></div>
        <div class="static" :class="classObj"></div>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>2.数组语法</h1>
        <div :class="[staticClass,redClass]">
            <p>[staticClass,redClass]</p>
        </div>
        <div :class="[staticClass,isActiveRedClass ? redClass : '']">
            <p>[staticClass,isActiveRedClass ? redClass : '']</p>
        </div>
        <div :class="[staticClass,{red:isActiveRedClass}]">
            <p>[staticClass,{redClass:isActiveRedClass}]</p>
        </div>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>3.对象语法</h1>
        <div :style="{'background-color':boxBC,'min-width':boxMW+'px',minHeight:boxMH+'px',float:float,margin:margin}">
        	<p>{'background-color':boxBC,'min-width':boxMW+'px',minHeight:boxMH+'px',float:float,margin:margin + 'px'}</p>
        </div>

        <div :style="styleObject">
        	<p>styleObject</p>
        </div>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>4.数组语法</h1>
        <div :style="[styleObject,overridingStyles]">
        	<p>[styleObject,overridingStyles]</p>
        </div>
    </div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            red: true,
            blue: false,
            classObj: {
                red: true,
                blue: false
            },
            staticClass: 'static',
            redClass: 'red',
            isActiveRedClass: true,
            boxBC:'red',
            boxMW:100,
            boxMH:100,
            float:'left',
            margin:'5px',
            styleObject:{
            	backgroundColor:'green',
            	minWidth:'100px',
            	minHeight:'100px',
            	float:'left',
            	margin:'5px'
            },
            overridingStyles:{
            	backgroundColor:'yellow',
            	minWidth:'200px',
            }
        }
    })
    </script>
</body>

</html>
